<template>
  <div class="app-container">
    <el-card header="title123">
      <el-form :model="record.params" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="record.params.name"
            placeholder="请输入"
            clearable
            @keyup.enter="record.refresh"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="record.params.status"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="val,key in statusOpt"
              :key="key"
              :label="val"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" style="width: 308px;">
          <el-date-picker
            v-model="record.params.timerange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="onTest">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="Edit">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="Upload">导入</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download">导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="record.refresh"></right-toolbar>
      </el-row>

      <el-table v-loading="record.loading" :data="record.row" border>
        <el-table-column prop="id" label="ID" />
        <el-table-column min-width="230px" label="图片地址" prop="img">
          <template #default="scope">
            <ImagePreview class="row-img" :src="scope.row.img"></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="modal.handle(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
            <el-button link type="primary" @click="handleEnable(scope.row)">{{ !scope.row.enable ? '开启':'禁用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="record.total > 0"
        :total="record.total"
        v-model:page="record.params.page"
        v-model:limit="record.params.page_size"
        @pagination="record.query"
      />
    </el-card>

     <el-dialog
      v-model="modalForm.visible"
      title="新增/编辑">
      <el-form
        ref="modalRef"
        :model="modalForm.params"
        :rules="modalForm.rules"
        :label-width="'120px'">
        <el-form-item label="key">
          <el-input v-model="modalForm.params.key" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="语言">
          <el-radio-group v-model="modalForm.params.language_id">
            <el-radio v-for="val,key in langOpt" :key="key" :label="key">{{ val }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="modalForm.params.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="modalForm.params.introduction" placeholder="请输入" type="textarea" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="modalForm.params.content" placeholder="请输入" type="textarea" />
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <ImageUpload v-model="modalForm.params.img_url" :limit="1"></ImageUpload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="modalForm.visible = false">取消</el-button>
          <el-button type="primary" @click="modalForm.submit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <ModalTypl v-model="modal.visible" :info="modal.info" />
  </div>  
</template>

<script setup>
import ModalTypl from './component/modalTpl.vue'
import useDialogStore from '@/store/modules/dialog'
const dialog = useDialogStore()
dialog.initDialog(['testDialog'])
function onTest() {
  dialog.openDialog({
    name: 'testDialog',
    props: { name: 'test' },
    config: { title: '新增', width: 600 },
    events: {
      update: (e) => {
        console.log(e)
      }
    }
  })
}

const showSearch = ref(true)
const statusOpt = {
  0: '全部',
  1: '其他',
}
const record = reactive({
  loading: false,
  row: [
    { id: 1, name: '123', img: 'https://picsum.photos/200/300' },
  ],
  total: null,
  params: {
    name: '',
    status: '',
    timerange: '',
    page: 1,
    page_size: 10,
  },
  refresh: () => {
    record.row = []
    record.total = null
    record.params.page = 1
    record.query()
    console.log('refresh')
  },
  query: async () => {
    record.loading = true
    try {
      // const { status, data: { list } } = await whiteip(record.params)
      // if (status === 200) {
      //   const { total, data } = list
      //   record.row = data
      //   record.total = total
      // }
    } finally {
      record.loading = false
    }
  }
})

const langOpt = { 1: '英文', 2: '越南语' }
const modalRef = ref(null)
const modalForm = reactive({
  visible: false,
  params: {
    name: '', // 名称
  },
  rules: {
    // title: [ { required: true, message: '请输入', trigger: 'blur' },]
  },
  submit: async () => {
    const { value: formEl } = modalRef
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        const params = Object.assign({}, modalForm.params)
        const { id, name, introduction, content, img_url } = params
        console.log('params', params)
        // const { status, message, data } = id ? await organizationUpdate({id, name, introduction, content, img_url}) : await organizationAdd(params)
        // if (status === 200) {
        //   proxy.$modal.msgSuccess(message)
        //   modalForm.visible = false
        //   record.refresh()
        // }
      }
    })
  }
})
// 新增/编辑
function handleUpdate(row) {
  console.log('record handle', row)
  proxy.resetForm('modelRef')
  modalForm.params = {
    name: '', // 名称
  }
  if (row) modalForm.params = Object.assign({}, row)
  modalForm.visible = true
}
// 删除
function handleDelete(row) {
  const { id } = row
  proxy.$modal.confirm('是否确定删除？').then(() => {
    organizationDel({ id }).then(res => {
      const { status, message } = res
      if (status === 200) {
        proxy.$modal.msgSuccess(message)
        record.refresh()
      }
    })
  })
}
const modal = reactive({
  visible: false,
  info: {},
  handle: (item) => {
    modal.visible = true
    modal.info = item
  }
})
</script>

<style scoped lang="scss">
.row-img {
  max-width: 100px;
  max-height: 100px;
}
</style>